@import '../../utils/ldy.less';

@loadingBg: '@{PREFIX}/loadingBg.jpg';

.loading {
  position: relative;
  width: 100%;
  height: 100vh;
  font-size: 20px;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-image: url(@loadingBg);
  opacity: 1;
  transition: all 1.2s ease-in;
  img {
    display: block;
  }
  .gif {
    position: absolute;
    top: 30%;
    width: 100%;
    img {
      width: 100%;
    }
  }
  .progress {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 20%;
    left: 0;
    .bar {
      position: relative;
      width: 250px;
      height: 30px;
      margin: auto;
      img {
        position: relative;
        z-index: 1;
        width: 100%;
      }
      .line {
        position: absolute;
        top: 20%;
        right: 100%;
        bottom: 2%;
        left: 2%;
        border-radius: 16px;
        background-color: #d5726c;
      }
    }
  }
}